<template>
  <el-row style="justify-content: center;">
		<el-col class="bottom" :span="13">
		  <nav-tab-bottom :titles="bottomTitle" indexName="navBottomIndex" class="bottomTab"
			:routes="bottomRoutes"></nav-tab-bottom>
		</el-col>
		<el-col class="content">
			<el-row>
				<el-col :span="18" :offset="3">
					<router-view v-slot="{ Component }">
						<keep-alive>
							<component :is="Component" />
						</keep-alive>
					</router-view>
				</el-col>
			</el-row>
		</el-col>
  </el-row>
</template>

<script>
	import navTabBottom from 'components/tab/tab_small.vue'
  export default{
    name:'',
    data(){
      return {
          bottomTitle:['首页','歌手','排行榜','分类','歌单','MV','专辑'],
          bottomRoutes:['index','singer','rank','type','songs','mv','album'],
      }
    },
    methods:{
      
    },
    components:{
       navTabBottom
    }
  }
</script>

<style scoped>
	.bottom{
		width: 50%;
		margin: 20px auto;
		background-color: #fff;
	}
	.content{
		background-color: var(--bcc-grey);
	}
</style>
